<template>
<div>
  <head title="Refund details"></head>
  <scroller class="wrapper">
    <div class="section1">
      <!-- 未支付状态 -->
      <div class="secTop" v-if="refundInfo.type!=6">
        <text class="secTit">Refund processing</text>
        <text
          class="secinfo"
        >After {{days}} days,{{hours }} hours, {{minutes}} minutes, the system will automatically cancel the refund application.</text>
      </div>
      <div class="secTop" v-if="refundInfo.type==6">
        <text class="secTit">Refunded</text>
        <text class="secinfo">{{refundInfo.co_refund_time|formatDateTime}}</text>
      </div>

      <div class="secCon">
        <text class="conBtn">Contact buyers</text>
        <text class="orders">orders</text>
        <div class="conSec">
          <image class="goodImg" src="root:img/goods.png" />
          <div class="goodInfo">
            <text class="goodsName">Shorts</text>
            <text class="goodsStu">Brand new</text>
            <div class="goodsPri">
              <text class="price">AU$ {{refundInfo.refund_price}}</text>
              <text class="priTips">（Free shipping）</text>
            </div>
          </div>
        </div>
        <text
          class="orderTime"
        >Service type：{{refundInfo.refund_type==1?'Refund':refundInfo.refund_type==2?'Refund & Exchange':'Exchange'}}</text>
        <text class="orderTime">Reason：{{refundInfo.refund_reason}}</text>
        <text class="orderTime">Application time： {{refundInfo.create_time|formatDateTime}}</text>
      </div>
    </div>
    <!-- 物流输入 -->
    <div class="wuliuMes" v-if="refundInfo.type==4&&refundInfo.refund_type!=1">
      <div class="inputBox">
        <text class="inputTit">Shipment number</text>
        <input class="inputCell" v-model="shipmentN" />
      </div>
      <div class="inputBox">
        <text class="inputTit">Delivery company</text>
        <input class="inputCell" v-model="shipmentC" />
      </div>
    </div>
    <!-- 物流信息 -->
    <div class="wuliuMes" v-if="traces.length>0">
      <text class="paidtip">Delivery tracking</text>
      <div class="devList">
        <div
          class="itemList"
          v-for="(item,index) in traces"
          :key="index"
          v-if="isAll?index>0:index<2"
        >
          <div class="lineBox">
            <text class="itemTit">{{item.AcceptStation}}</text>
            <text class="itemDec">{{item.AcceptTime}}</text>
          </div>
          <text class="radio" :class="[index==0?'activeR':'']"></text>
        </div>
        <div class="Expand" v-if="!isAll" @click="isAll=true">
          <text class="ExpandTxt">Expand</text>
          <text class="ExpandIcon">&#xe60a;</text>
        </div>
      </div>
    </div>
  </scroller>
  <div class="bottomBtn" v-if="refundInfo.type==1">
    <text class="RefueBtn" @click="refuseApply">Refuse</text>
    <text class="shipment" @click="acceptApply">Accept</text>
  </div>
  <div class="bottomBtn" v-if="refundInfo.type==4&&refundInfo.refund_type!=1">
    <text class="Confirm" @click="confirmShip">Confirm</text>
  </div>
  <div class="bottomBtn" v-if="refundInfo.type==3">
    <text class="Confirm" @click="confirmRe">Confirm Receive</text>
  </div>

  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import {
  get_refundInfo,
  co_refundAgree,
  get_order_express,
  co_refundTake,
  add_refundTracking
} from "../../mixin/ajax.js";
import asCore from "../../mixin/core";
export default {
  data() {
    return {
      days: "",
      shipmentN: "",
      shipmentC: "",
      hours: "",
      minutes: "",
      seconds: "",
      refundInfo: {},
      users: {},
      OrderCode: "",
      traces: [],
      isAll: false
    };
  },
  methods: {
    onLoad(parmar) {
      if (parmar && parmar.param) {
        return false;
      }
      this.orderId = parmar.id;
      asCore.getBsessionid(userId => {
        this.users_id = userId;
        this.getOrderDetail();
      });
    },
    confirmShip() {
      if (!this.shipmentN) {
        this.toast("Please enter shipment number");
        return false;
      }
      if (!this.shipmentC) {
        this.toast("Please enter delivery company");
        return false;
      }
      add_refundTracking(
        {
          users_id: this.users_id,
          co_order_id: this.orderId,
          logistic_code: this.shipmentN,
          logistic: this.shipmentC,
          shipper_code: this.shipmentC
        },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            this.getOrderDetail();
          }
        }
      );
    },
    confirmRe() {
      co_refundTake(
        { users_id: this.users_id, order_id: this.order_id },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            this.getOrderDetail();
          }
        }
      );
    },
    getoverTime(end_time) {
      var endDate = new Date(end_time * 1000);
      //当前时间
      var nowDate = new Date();
      //相差的总秒数
      var totalSeconds = parseInt((endDate - nowDate) / 1000);
      //天数
      this.days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      var modulo = totalSeconds % (60 * 60 * 24);
      //小时数
      this.hours = Math.floor(modulo / (60 * 60));
      modulo = modulo % (60 * 60);
      //分钟
      this.minutes = Math.floor(modulo / 60);
      //秒
      this.seconds = modulo % 60;
    },
    getOrderDetail() {
      get_refundInfo(
        { users_id: this.users_id, order_id: this.order_id },
        (res, flag) => {
          if (flag) {
            this.refundInfo = Object.assign(
              {},
              this.refundInfo,
              res.data.refund
            );
            this.users = Object.assign({}, this.users, res.data.users);

            if (res.data.refund.type == "1") {
              this.getoverTime(res.data.refund.end_time);
            } else if (
              res.data.refund.type == "3" &&
              res.data.refund.shipper_code
            ) {
              this.getExpress(
                res.data.refund.shipper_code,
                res.data.refund.logistic_code
              );
            } else if (
              res.data.type == "5" &&
              res.data.refund.co_tracking_number
            ) {
              this.getExpress(
                res.data.refund.co_tracking_number,
                res.data.refund.co_logistics
              );
            }
          }
        }
      );
    },
    // 拒绝
    refuseApply() {},
    // 同意
    acceptApply() {
      co_refundAgree(
        { users_id: this.users_id, order_id: this.order_id },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            this.getOrderDetail();
          }
        }
      );
    },
    getExpress(shipper_code, logistic_code) {
      get_order_express(
        { shipper_code: shipper_code, logistic_code: logistic_code },
        (res, flag) => {
          if (flag) {
            this.OrderCode = res.OrderCode; //物流运单号
            this.traces = res.Traces;
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
  flex: 1;
}

.bottomBtn {
  height: 120px;
  width: 750px;
  padding-right: 32px;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}
.shipment {
  width: 235px;
  height: 68px;
  background-color: rgba(48, 48, 48, 1);
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 68px;
  border-radius: 5px;
  margin-left: 20px;
}
.RefueBtn {
  width: 235px;
  height: 68px;
  background-color: transparent;
  border-width: 1px;
  border-color: #303030;
  border-style: solid;
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #303030;
  text-align: center;
  line-height: 68px;
  border-radius: 5px;
}
.Confirm {
  width: 686px;
  height: 80px;
  background-color: rgba(48, 48, 48, 1);
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 80px;
  border-radius: 5px;
}
.Confirm:active {
  background-color: #000;
}
.RefueBtn:active {
  background-color: #ccc;
}
.shipment:active {
  background-color: #000;
}

.stepBox {
  width: 750px;
  height: 275px;
  position: relative;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.line {
  width: 657px;
  height: 2px;
  background-color: #d8d8d8;
  position: absolute;
  top: 141px;
  left: 47px;
}

.ciclebox {
  position: absolute;
  width: 750px;
  height: 275px;
  left: 0;
  top: 0;

  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

.cicle {
  border-radius: 75px;
  width: 75px;
  height: 75px;
  border-width: 1px;
  border-style: solid;
  border-color: #d8d8d8;
  background-color: #ffffff;
  text-align: center;
  line-height: 75px;
}

.step1 {
  margin-left: 40px;
  margin-top: 150px;
  font-size: 28px;
  color: #999999;
}

.step2 {
  margin-bottom: 150px;
  color: #999999;
  font-size: 28px;
}

.step3 {
  margin-top: 150px;
  color: #999999;
  font-size: 28px;
}

.step4 {
  margin-bottom: 150px;
  font-size: 28px;
  color: #999999;
}

.active {
  background-color: #ba8833;
  border-color: #ba8833;
  color: #ffffff;
}

.activeStep {
  color: #ba8833;
}

.section1 {
  margin-top: 20px;
  width: 750px;
  background-color: #ffffff;
}

.secTop {
  width: 750px;
  padding: 32px 32px 25px;
  border-bottom-width: 1px;
  border-bottom-color: #e8e8e8;
  border-style: solid;
}

.secTit {
  font-size: 32px;
  color: #383838;
}

.secinfo {
  margin-top: 10px;
  font-size: 22px;
  color: #383838;
}

.waitShip {
  background-color: #ffffff;
}

.orderMes {
  padding: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
}

.paidtip {
  font-size: 32px;
  color: #383838;
}

.shipTime {
  color: #383838;
  font-size: 22px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.buyers {
  color: #303030;
  font-size: 26px;
  margin-top: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.buyAddress {
  color: #303030;
  font-size: 26px;
}

.connectBox {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
  padding-bottom: 10px;
}

.connect {
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #303030;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
}

.connect:active {
  background-color: #dddddd;
}

.wuliuMes {
  padding: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
}

.inputBox {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.inputTit {
  color: #333333;
  font-size: 24px;
  width: 210px;
}

.inputCell {
  flex: 1;
  height: 48px;
  border-width: 1px;
  border-color: #cdcdcd;
  border-style: solid;
  border-radius: 4px;
  padding-left: 20px;
}

.devList {
  padding-top: 20px;
  position: relative;
}
.Expand {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.ExpandTxt {
  color: #888888;
  font-size: 16px;
  margin-right: 15px;
}
.ExpandIcon {
  font-family: iconfont;
  color: #888888;
  font-size: 30px;
}
.itemList {
  padding-left: 6px;
  margin-left: 6px;
  /* border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #D8D8D8; */
  position: relative;
}

.lineBox {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #d8d8d8;
  padding-left: 20px;
  padding-bottom: 20px;
}

.radio {
  position: absolute;
  left: 0px;
  top: 0;
  background-color: #888888;
  width: 12px;
  height: 12px;
  border-radius: 6px;
}

.itemTit {
  color: #888888;
  font-size: 20px;
}

.itemDec {
  color: #888888;
  font-size: 16px;
}

.secCon {
  padding: 32px;
  position: relative;
}

.conBtn {
  position: absolute;
  right: 32px;
  top: 40px;
  background-color: #303030;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  font-size: 32px;
  padding: 0 20px;
}

.conBtn:active {
  background-color: #dddddd;
}

.orders {
  color: #303030;
  font-size: 32px;
}

.conSec {
  margin-top: 20px;
  flex-direction: row;
  margin-bottom: 20px;
}

.goodImg {
  width: 132px;
  height: 132px;
  margin-right: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #dfdfdf;
}

.goodInfo {
  justify-content: flex-end;
}

.goodsName {
  color: #303030;
  font-size: 30px;
}

.goodsStu {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #888888;
  font-size: 22px;
}

.goodsPri {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.price {
  color: #ec414d;
  font-size: 30px;
  margin-right: 15px;
}

.priTips {
  font-size: 26px;
  color: #666666;
}

.orderTime {
  font-size: 26px;
  color: #888888;
  margin-top: 10px;
}
</style>
